<template>
	<basic-container>
		<el-row :gutter="20">
			<el-col :span="4">
				<avue-tree :option="treeoption" :data="treedata" @node-click="nodeClick">
				</avue-tree>
			</el-col>
			<el-col :span="20">
				<avue-crud :option="option" :data="data" ref="crud" v-model="form" :table-loading="loading"
				 :before-open="beforeOpen" @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
				 @selection-change="selectionChange" @on-load="onLoad">
					<template slot-scope="{row}" slot="btnFuns">
						<el-tag v-for="(item,index) in row.btnFuns" :key="index" style="margin-left:3px;">{{item.name}}</el-tag>
					</template>
					<template slot-scope="{row}" slot="icon">
						<div style="text-align:center">
							<i :class="row.icon"></i>
						</div>
					</template>
					<template slot-scope="scope" slot="menu">
						<el-button type="text" size="small" icon="el-icon-edit" @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
						<el-button type="text" size="small" icon="el-icon-delete" @click.stop="rowDel(scope.row)">删除</el-button>
						<el-button v-if="(scope.row.children==null || scope.row.children.length==0)" type="text"
						 size="small" icon="el-icon-setting" @click.stop="onClick(scope.row)">按钮</el-button>
					</template>
				</avue-crud>
			</el-col>
		</el-row>
		<el-dialog title="操作按钮" :visible.sync="dialogFormVisible" width="50%" :modal-append-to-body='false'>
			<avue-crud ref="crud" :option="btnoption" :data="btndata" @row-update="addUpdate" @row-del="btnDel">
			</avue-crud>
		</el-dialog>
	</basic-container>
</template>

<script>
	import {
		getList,
		remove,
		btnRemove,
		update,
		add,
		addUpdate
	} from "@/api/system/menu";
	import iconList from "@/config/iconList";
	import {
		baseUrl
	} from '@/config/env';

	export default {
		data() {
			return {
				query: {
					parentId: ''
				},
				treedata: [],
				treeoption: {
					size: 'small',
					props: {
						label: 'name',
						value: 'id'
					},
					menu: false,
					addBtn: false
				},
				loading: false,
				currentMenu: "",
				btndata: [],
				btnoption: {
					keyId: 'id',
					menuWidth: 150,
					refreshBtn: false,
					columnBtn: false,
					addBtn: false,
					editBtn: false,
					addRowBtn: true,
					cellBtn: true,
					column: [{
						label: '名称',
						prop: 'name',
						cell: true,
						rules: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						}]
					}, {
						label: '编码',
						prop: 'funType',
						cell: true,
						rules: [{
							required: true,
							message: '请输入编码',
							trigger: 'blur'
						}]
					}, {
						label: '备注',
						prop: 'remark',
						cell: true
					}]
				},
				dialogFormVisible: false,
				form: {
					parentId: ''
				},
				selectionList: [],
				option: {
					dialogDrag: true,
					searchMenuSpan: 6,
					refreshBtn: false,
					// expand:true,
					// defaultExpandAll:true,
					tip: false,
					dialogWidth: "60%",
					tree: true,
					border: true,
					editBtn: false,
					delBtn: false,
					index: true,
					viewBtn: false,
					column: [{
							label: "菜单名称",
							prop: "name",
							search: true,
							rules: [{
								required: true,
								message: "请输入菜单名称",
								trigger: "blur"
							}]
						},
						{
							label: "路由地址",
							width: "200px",
							prop: "urls"
						},
						{
							label: "上级菜单",
							prop: "parentId",
							type: "tree",
							width: "100px",
							dicUrl: baseUrl + "/api/Menu/gettree",
							hide: true,
							props: {
								label: "name",
								value: "id"
							},
							rules: [{
								required: false,
								message: "请选择上级菜单",
								trigger: "click"
							}]
						},
						{
							label: "图标",
							width: "50px",
							prop: "icon",
							type: "icon",
							slot: true,
							iconList: iconList,
							rules: [{
								message: "请输入菜单图标",
								trigger: "click"
							}]
						},
						{
							label: "排序",
							width: "50px",
							prop: "sort",
							align: "center",
							type: "number",
							rules: [{
								required: true,
								message: "请输入菜单排序",
								trigger: "blur"
							}]
						},
						{
							label: "按钮",
							prop: "btnFuns",
							slot: true,
							display: false
						},
						{
							label: "菜单备注",
							prop: "remark",
							type: "textarea",
							span: 24,
							minRows: 3,
							hide: true
						}
					]
				},
				data: []
			};
		},

		computed: {
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			}
		},
		created() {
			getList({
				limit: 2
			}).then(res => {
				this.treedata = res.data.data;
			});
		},
		methods: {
			nodeClick(data) {
				this.query.parentId = data.id
				this.onLoad(this.query)
			},
			handleEdit(row, index) {
				this.$refs.crud.rowEdit(row, index);
			},
			onClick(row) {
				this.currentMenu = row.id
				this.btndata = row.btnFuns
				this.dialogFormVisible = true
			},
			addUpdate(form, index, done, loading) {
				form.menuId = this.currentMenu
				addUpdate(form).then(() => {
					loading()
					//const data = res.data
					done()
				}, error => {
					done();
					console.log(error);
				});
			},
			rowSave(row, loading, done) {
				add(row).then(() => {
					//const data = res.data
					loading();
					this.onLoad(this.query);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				update(row).then(() => {
					//const data = res.data
					loading();
					this.onLoad(this.query);
				}, error => {
					done();
					console.log(error);
				});
			},
			btnDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return btnRemove(row.id);
					})
					.then(() => {
						console.log(this.btndata)
					});
			},
			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(row.id);
					})
					.then(() => {
						this.onLoad(this.query);
					});
			},
			searchReset() {
				this.onLoad();
			},
			searchChange(params, done) {
				this.onLoad(params);
				done();
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			beforeOpen(done, type) {
				// if (["edit", "view"].includes(type)) {
				// 	getMenu(this.form.id).then(res => {
				// 		this.form = res.data.data;
				// 	});
				// }
				if (["add"].includes(type)) {
					this.form.parentId = this.query.parentId;
				}
				done();
			},
			onLoad(params = {}) {
				this.loading = true
				getList(params).then(res => {
					this.data = res.data.data;
					this.loading = false;
				});
			}
		}
	};
</script>

<style>
</style>
